{% extends "moments/base.html" %}

{% block title %}User{% endblock %}
{% block user %}class="active"{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-2">
                <img id="pic" src="{{ STATIC_URL }}image/{% if user.pic %}{{user.pic}}{% else %}messi.jpg{% endif %}" class="info img-responsive img-thumbnail">
            </div>
            <div class="col-md-10">
                <h1 id="name" style="font-size:70px">{{ user.user }}</h1>
                <p style="font-size:50px" id="email" class="info">Email: {{ user.email}}</p>
            </div>
        </div>
        <div class="row" style="margin-top:62px">
            <div class="col-md-4">
                <p style="font-size:50px">Region</p>
            </div>
            <div class="col-md-8">
                <p style="font-size:50px;color:gray" id="region" class="info">{{user.region}}</p>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-4">
                <p style="font-size:50px">What's up</p>
            </div>
            <div class="col-md-8">
                <p style="font-size:50px;color:gray" id="motto" class="info">{{user.motto}}</p>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-4">
                <p style="font-size:50px">Album</p>
            </div>
            <div class="col-md-8">
                <img src="{{ STATIC_URL }}image/messi.jpg" style="width:188px">
            </div>
        </div>        
        <hr>
    </div>
    <script>
        function update_user(){
            $.ajax({
                url: site_url + 'users/' + "{{ user.id }}" + "/",
                type: 'patch',
                headers: {"X-CSRFToken": "{{ csrf_token }}"},
                data:{
                    "motto":$("#motto").val(),
                    "region":$("#region").val(),
                    "email":$("#email").val(),
                    "pic":$("#pic").val(),
                },
                success:function (response){
                    if(response["result"]){
                        alert(response["message"])
                        location.reload()
                    }else{
                        alert(response["message"])
                    }
                }
            })
        }
        $(".info").click(function (){
            $("#motto").replaceWith("<input id='motto' style='font-size:50px;color:gray' value='"+$("#motto").html()+"'>")
            $("#region").replaceWith("<input id='region' style='font-size:50px;color:gray' value='"+$("#region").html()+"'>")
            $("#pic").replaceWith("<input id='pic' style='font-size:50px;color:gray;width:150px;' value='"+$("#pic").html()+"'>")
            $("#email").replaceWith("<input id='email' style='font-size:50px;color:gray' placeholder='Email:' value='"+$.trim($("#email").html().split(":")[1])+"'>")
            $("#name").click(function (){
                update_user()
            })
        })

    </script>

{% endblock %}